<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-03-08 11:31:34
 * @LastEditTime: 2023-04-18 16:43:03
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\components\spec\index.vue
-->
<template>
  <el-form :model="spec.model" ref="registerRef" :rules="spec.rules" label-width="100px" class="spec">
    <el-row :gutter="20">
      <el-col :span="props.col || 24" v-for="item in spec.forms" :key="item.oneKey">
        <el-form-item :label="item.label + ':'" :prop="item.oneKey">
          <!-- 单行文本 -->
          <template v-if="item.specType === 1">
            <el-input v-model="spec.model[item.oneKey]" clearable :placeholder="`请输入${item.label}`"></el-input>
          </template>
          <!-- 多行文本 -->
          <template v-else-if="item.specType === 2">
            <el-input v-model="spec.model[item.oneKey]" clearable type="textarea" :placeholder="`请输入${item.label}`"></el-input>
          </template>
          <!-- 单选 -->
          <template v-else-if="item.specType === 3">
            <el-select v-model="spec.model[item.oneKey]" :placeholder="`请选择${item.label}`" clearable filterable class="w-100">
              <el-option v-for="row in item.selectOptions" :key="row.value" :label="row.label" :value="row.value"> </el-option>
            </el-select>
          </template>
          <!-- 多选 -->
          <template v-else-if="item.specType === 4">
            <el-select v-model="spec.model[item.oneKey]" multiple :placeholder="`请选择${item.label}`" clearable filterable class="w-100">
              <el-option v-for="row in item.selectOptions" :key="row.value" :label="row.label" :value="row.value"> </el-option>
            </el-select>
          </template>
          <!-- 数值 -->
          <template v-else-if="item.specType === 5">
            <z-input v-model="spec.model[item.oneKey]" :placeholder="`请输入${item.label}`" :max="item.pointLength" />
          </template>
          <!-- 日期选择 -->
          <template v-else-if="item.specType === 6">
            <el-date-picker v-model="spec.model[item.oneKey]" :placeholder="`请选择${item.label}`" value-format="YYYY-MM-DD" class="date-picker">
            </el-date-picker>
          </template>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import { post } from '@/api/index.js';
import { reactive } from 'vue';
let route = useRoute();
let router = useRouter();
let { purview, isJson } = inject('$global');
let message = inject('$message');
let props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    }
  },
  col: {
    type: Number,
    default: 8
  },
  isArray: {
    type: Boolean,
    default: false
  }
});
let spec = reactive({
  forms: [],
  rules: {},
  model: {}
});
let registerRef = ref('');
watch(
  () => props.data,
  val => {
    val = val.map(r => {
      r.oneKey = `id:${r.id}`;
      return r;
    });
    // 需要重置
    spec.rules = {};
    spec.forms = [];
    spec.model = {};
    // 选择项
    spec.forms = val.map(row => {
      // 处理 单选 多选 options
      if ([3, 4].includes(row.specType) && row.selectType === 1) {
        row.selectOptions = row.selectValue.split('\n').map(r => {
          return { label: r, value: r };
        });
      }
      return row;
    });

    // 规格数据填充
    val.map(r => {
      let value = r.defaultValue || null;
      if (r.value != undefined) {
        if (isJson(r.value)) {
          value = Array.isArray(JSON.parse(r.value)) ? JSON.parse(r.value) : r.value + '';
        } else {
          value = r.value + '';
        }
      }
      spec.model[r.oneKey] = value;
    });
    // 验证项
    val.map(row => {
      if (row.isRequired) {
        let obj = { required: true, trigger: 'change', message: `${row.label}不能为空!` };
        if (row.specType === 4) obj.type = 'array';
        spec.rules[row.oneKey] = [obj];
      }
    });
  },
  { immediate: true }
);
const check = async () => {
  if (!registerRef.value) return;
  let res = await registerRef.value.validate(val => val);
  if (!res) return false;
  let obj = {};
  Object.keys(spec.model).map(r => {
    obj[r.replace('id:', '')] = Array.isArray(spec.model[r]) ? JSON.stringify(spec.model[r]) : spec.model[r];
    let index = spec.forms.findIndex(row => row.id === Number(r.replace('id:', '')));
    spec.forms[index].value = obj[r.replace('id:', '')];
  });
  return props.isArray ? spec.forms : obj;
};
defineExpose({
  check
});
</script>
<style lang="scss" scoped>
.spec {
  width: 100%;
  :deep(.date-picker) {
    width: 100%;
    .el-input__wrapper {
      width: 100%;
    }
  }
}
</style>
